<template>
    <div class="speed-progress">
        <div class="title">
            <span class="bord"></span>
            <span class="word">申请进度</span>
        </div>
        <div class="lists">
            <ul>
                <li class="clearfix">
                    <div class="time">
                        <img src="../../assets/imgs/agent/speedh.png" alt="">
                        <span>{{time | formatDate}}</span>
                    </div>
                    <div class="word">
                        <span>已提交申请</span>
                    </div>
                </li>
                <li class="clearfix" v-for="listItem in list">
                    <div class="time">
                        <img src="../../assets/imgs/agent/speedh.png" alt="">
                        <span>{{listItem.createTime | formatDate}}</span>
                    </div>
                    <div class="word">
                        <span v-if="listItem.progress=='1'">审核中</span>
                        <span v-if="listItem.progress=='2'">审核成功</span>
                        <span v-if="listItem.progress=='3'">审核失败</span>
                    </div>
                </li>
            </ul>
        </div>
        <!-- <div class="btn">
            <span>立即查询</span>
        </div> -->
    </div>
</template>

<script>
import http from "@/assets/js/axios"
import { domain } from '@/assets/js/config'
import $ from 'jquery'
import { Toast } from 'mint-ui'
export default {
    data() {
        return {
            userToken: '',
            time: '',
            list: []
        }
    },
    filters: {
        formatDate: function (value) {
            let date = new Date(value);
            let y = date.getFullYear();
            let MM = date.getMonth() + 1;
            MM = MM < 10 ? ('0' + MM) : MM;
            let d = date.getDate();
            d = d < 10 ? ('0' + d) : d;
            let h = date.getHours();
            h = h < 10 ? ('0' + h) : h;
            let m = date.getMinutes();
            m = m < 10 ? ('0' + m) : m;
            let s = date.getSeconds();
            s = s < 10 ? ('0' + s) : s;
            return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
        }
    },
    components: {

    },
    mounted() {
        let userToken = localStorage.getItem("token") || ''
        this.userToken = userToken
        if (!userToken) {
            that.$router.push('/agLogin')
        }
        this.getReason();
    },
    methods: {
        direct: function (val) {
            this.$router.push({ path: '/' + val });
        },
        // 用户信息
        getReason: async function () {
            const res = await http.post('xshk/f/apply/getprocess?token=' + this.userToken)
            // console.log(res);
            if (res.data.code == 200) {
                this.list = res.data.data;
                this.time = res.data.data[0].createTime;
            }
        },
    }
}
</script>

<style lang='stylus' scoped>
.speed-progress {
    .title {
        height: 80px;
        line-height: 60px;
        padding-left: 30px;
        background-color: #f0f0f0;

        .bord {
            display: inline-block;
            width: 6px;
            height: 20px;
            background: rgba(194, 223, 90, 1);
        }

        .word {
            font-size: 24px;
            font-family: PingFangSC-Regular;
            font-weight: 400;
            color: rgba(0, 0, 0, 1);
        }
    }

    .lists {
        padding: 0 40px;
        margin-top: 10px;

        ul {
            li {
                .time {
                    height: 30px;
                    line-height: 30px;
                    position: relative;

                    img {
                        position: absolute;
                        top: 15px;
                        left: 10px;
                        width: 30px;
                        height: 30px;
                    }

                    span {
                        position: absolute;
                        top: 10px;
                        left: 60px;
                        height: 42px;
                        line-height: 42px;
                        padding-bottom: 10px;
                        font-size: 24px;
                    }
                }

                .word {
                    height: 50px;
                    line-height: 5px;
                    margin-top: 30px;
                    margin-left: 23px;
                    padding-left: 20px;

                    // border-left: 2px solid #ccc;
                    span {
                        margin-left: 20px;
                        font-size: 16px;
                        font-family: MicrosoftYaHei;
                        color: #C2DF5A;
                    }
                }
            }
        }
    }

    .btn {
        margin: 0 auto;
        margin: 0 30px;
        margin-top: 1px;
        // margin-left: 0.6px;
        width: 300px;
        height: 500px;
        line-height: 50px;
        background: rgba(213, 177, 110, 1);
        border-radius: 10px;
        text-align: center;
        display: block;

        span {
            font-size: 16px;
            font-family: MicrosoftYaHei;
            color: rgba(255, 255, 255, 1);
        }
    }
}
</style>
